<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-nav-bar title="招聘计划" left-text="返回" left-arrow>
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
            <van-search
                    v-model="keyword"
                    @keydown.enter.native="initEnlist"
                    shape="round"
                    background="#fff"
                    placeholder="请输入搜索关键词"
            />
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
            >
                <!--这哩记录一下 数据库中没有thum字段 所以我自己创建了一个beautiful数组 在遍历enlists数组的同时
                    根据enlists名称遍历的不同下标来决定beautiful数组对应该下标的图片
                    解决了即使没有数据库字段也可以在自己遍历时加上额外需要遍历的模拟数据-->
                <van-card
                        v-for="(item, index) in enlists"
                        :key="index"
                        :thumb="beautiful[index].imgUrl"
                >
                    <template #tags>
                         <span style="float: left;margin-top: 4px">
                             招聘名称:
                            {{item.encruitName}}
                        </span>
                        <span style="float: left;margin-top: 10px; width: 100%">
                            技能需求描述:
                            {{item.encruitRequire}}
                        </span>
                        <div style="float: left;width: 200px">
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">招聘人数</van-tag>
                                <span style="margin-left: 10px">{{item.encruitCount}}人</span>
                            </div>
                             <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">发布时间</van-tag>
                                <span style="margin-left: 10px">{{item.createDate}}</span>
                                </div>
                        </div>
                    </template>
                    <template #footer>
                        <van-button @click="showDetail(index)" type="primary" style="border-radius: 10px" size="mini">查看</van-button>
                    </template>
                </van-card>
                <van-dialog
                        @confirm="enroll"
                        v-model="show"
                        confirmButtonText="报名"
                        :title="detailEnlist.encruitName" show-cancel-button>
                    <div style="width: 200px;height: 200px;margin-left: 60px;margin-top: 20px">
                         <span style="float: left;margin-top: 4px">
                             招聘名称:
                            {{detailEnlist.encruitName}}
                        </span>
                        <span style="float: left;margin-top: 10px">
                            技能需求描述:
                            {{detailEnlist.encruitRequire}}
                        </span>
                        <div style="float: left;width: 200px">
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">招聘人数</van-tag>
                                <span style="margin-left: 10px">{{detailEnlist.encruitCount}}人</span>
                            </div>
                            <div style="float: left;width: 200px;margin-top: 10px">
                                <van-tag plain type="primary">发布时间</van-tag>
                                <span style="margin-left: 10px">{{detailEnlist.createDate}}</span>
                            </div>
                        </div>
                    </div>
                </van-dialog>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import Notify from "vant/lib/notify";

    import beautiful from '../api/beautiful.js'

    export default {
        name: "Encruit",
        data() {
            return{
                keyword: '',
                show: false,
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                beautiful: [],
                enlists: [],
                enlist: {
                    enrollStudent: '',
                    encruitName: "tlgen",
                    encruitRequire: "男",
                    encruitCount: 4,
                    departmentId: null,
                    applyName: "tlgen",
                    createDate: "2020-12-12",
                    updateDate:"2020-6-12",
                    enabled: false,
                },
                detailEnlist: {},
            }
        },
        mounted() {
            this.beautiful = beautiful
            this.initEnlist();
        },
        methods: {
            initEnlist() {
                this.loading = true;
                let url = '/technology/enlist/';
                    if (this.keyword != null) {
                        url += "?&encruitName=" + this.keyword;
                    }
                    console.log(url)
                    this.getRequest(url).then(res => {
                        this.loading = false;
                        if (res) {
                            this.enlists = res.data;
                        }
                 });
            },
            showDetail(index) {
                this.enlist = this.enlists[index]
                this.enlist.enrollStudent = JSON.parse(window.sessionStorage.getItem('user')).name
                console.log(this.enlist.enrollStudent)
                this.detailEnlist = this.enlists[index]
                this.show = true
            },
            enroll() {
                this.putRequest("/technology/enlist/", this.enlist).then(res => {
                    if (res) {
                        this.initEnlist();
                    }
                })
            },
            onRefresh() {
                setTimeout(() => {
                    this.initEnlist();
                    this. refreshing = false
                    Notify({ type: 'success', message: '刷新成功!' });
                }, 1000)

            },
        },
    }
</script>

<style scoped>

</style>
